<template>
  <van-pull-refresh v-model="loading" @refresh="refresh">
    <div class="find">
      <!-- 发现 -->
      <sub-nav-bar title="发现" :showIcon="false"></sub-nav-bar>
      <div class="content">
        <!-- 面试技巧 -->
        <find-cell title="面试技巧"></find-cell>
        <technic-item
          v-for="(item, index) in technicList"
          :key="index"
          :info="item"
        ></technic-item>
        <!-- 市场数据 -->
        <find-cell title="市场数据"></find-cell>
        <van-tag class="tag" color="#eceaea" text-color="#737489">{{
          chartList.city
        }}</van-tag>
        <van-tag class="tag" color="#eceaea" text-color="#737489">{{
          chartList.position
        }}</van-tag>
        <!-- 数据图表 -->
        <ul class="chart" ref="chart">
          <li
            class="chart-item"
            v-for="(item, index) in chartList.yearSalary"
            :key="index"
          >
            <div class="c1">{{ item.year }}</div>
            <div class="c2">
              <!-- // :style="{width:值}" -->
              <div
                class="num"
                :style="{
                  width: (item.salary / chartList.topSalary) * 100 + '%'
                }"
              >
                ¥{{ item.salary }}
              </div>
            </div>
            <div class="c3">
              <div v-if="item.percent !== undefined">
                <i class="iconfont up" v-if="item.percent >= 0">&#xe651;</i>
                <i class="iconfont down" v-else>&#xe64e;</i>
              </div>
            </div>
            <div class="c4">
              <span v-if="item.percent !== undefined">{{ item.percent }}%</span>
            </div>
          </li>
        </ul>
        <!-- 查看更多 -->
        <div v-if="totalLook === 3" class="look-more" @click="lookMore">
          查看更多<i class="iconfont">&#xe652;</i>
        </div>
        <!-- 收起 -->
        <div v-else class="look-more" @click="lookLess">
          收起<i class="iconfont r180">&#xe652;</i>
        </div>
        <find-cell
          title="面经分享"
          @click.native="$router.push('/home/shareList')"
        ></find-cell>
        <!-- shareItem 组件 -->
        <div>
          <share-item
            v-for="(item, index) in shareList"
            :key="index"
            :info="item"
          ></share-item>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
import findCell from './findCell'
import technicItem from './technicItem'
import shareItem from './shareItem'
import { articlesTechnic, chartDataHot, articlesShare } from '@/api/find.js'
export default {
  name: 'find',
  data () {
    return {
      technicList: [],
      chartList: '',
      totalLook: 3,
      shareList: [],
      loading: false // 是否处于加载中
    }
  },
  methods: {
    lookMore () {
      this.totalLook = 9999
      this.$refs.chart.style.height = this.$refs.chart.scrollHeight + 'px'
    },
    lookLess () {
      this.totalLook = 3
      this.$refs.chart.style.height =
        (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) * 3 +
        'px'
    },
    async refresh () {
      // 技巧列表
      const res = await articlesTechnic()
      // window.console.log(res)
      this.technicList = res.data.data.list
      // 市场数据
      const res2 = await chartDataHot()
      res2.data.data.yearSalary.reverse()
      this.chartList = res2.data.data
      // window.console.log(res2)
      // 面经分享
      const res3 = await articlesShare({
        limit: 3
      })
      this.shareList = res3.data.data.list
      // window.console.log(res3)
      this.$nextTick(() => {
        // 保证数据已渲染完成后执行
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
            3 +
          'px'
      })
      this.loading = false
    }
  },
  // 注册组件
  components: {
    findCell,
    technicItem,
    shareItem
  },
  created () {
    this.refresh()
  }
}
</script>

<style lang="less" scoped>
.find {
  .content {
    padding: 0 @p15;
    .tag {
      padding: 5px 6px;
      margin-right: 15px;
      margin-bottom: 20px;
    }
    .chart {
      transition: all 0.5s;
      overflow: hidden;
      .chart-item {
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .c1 {
          margin-right: 10px;
        }
        .c2 {
          flex: 1;
          text-align: right;
          background-color: #ebdfdf;
          height: 16px;
          line-height: 16px;
          border-radius: 10px;
          .num {
            border-radius: 10px;
            color: #fff;
            height: 100%;
            background-color: #fe6d67;
            padding-right: 10px;
          }
        }
        .c3 {
          text-align: center;
          width: 30px;
        }
        .c4 {
          width: 30px;
          text-align: right;
        }
        .down {
          color: #fe6d67;
        }
        .up {
          color: #00d47a;
        }
      }
    }
    .look-more {
      text-align: center;
      font-size: 14px;
      padding: 15px 0;
      .r180 {
        display: inline-block;
        transform: rotate(180deg);
      }
    }
  }
}
</style>
